<template>
  <div class="forOldCompanyReport">
    <el-form :ref="refName" :model="model" label-width="80px" :rules="rules" label-position="top" :gutter="24">
      <div class="box-f-card">
        <el-card class="box-card" shadow="never">
          <div slot="header">
            <span v-if="updatePageState === 'add'">新增</span>
            <span v-else-if="updatePageState === 'edit'">编辑</span>
          </div>
          <el-row>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="养老设施名称:" prop="facNo">
                <selectOldFacility v-if="updatePageState === 'add'" v-model="model.facNo" />
                <el-input v-else-if="updatePageState === 'edit'" v-model="model.facName" disabled />
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="营收年份:" prop="revenueYear">
                <el-date-picker v-model="model.revenueYear" value-format="yyyy" type="year" placeholder="选择年份" />
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="企业类别:">
                <el-radio-group v-model="model.companyType">
                  <el-radio :label="0">盈利性</el-radio>
                  <el-radio :label="1">非盈利性</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="成立时间:">
                <el-date-picker v-model="model.establishmentTime" clearable type="date" placeholder="请选择" />
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="注册资本(开办资金):">
                <el-input v-model="model.registeredCapital" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="投资总额:">
                <el-input v-model="model.totalInvestment" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="员工人数:">
                <el-input v-model="model.employeeCount" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                  <template slot="append">人</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="上年营收:">
                <el-input v-model="model.lastYearRevenue" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="上年盈利:">
                <el-input v-model="model.lastYearProfit" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <simpleInfoCard title="本年度营业收入分析">
            <template slot="contents">
              <el-row>
                <el-col :xl="14" :lg="14" :md="12" :sm="24">
                  <el-form-item label="">
                    <div class="ServiceItemTable">
                      <el-row class="head" :gutter="10">
                        <el-col :span="4">月份</el-col>
                        <el-col :span="6">营收金额</el-col>
                        <el-col :span="4">月份</el-col>
                        <el-col :span="6">营收金额</el-col>
                        <el-col :span="4">环比增减</el-col>
                      </el-row>
                      <el-row class="body-row">
                        <el-col :span="4">
                          <el-date-picker v-model="model.month1" value-format="yyyy-MM" type="month" placeholder="选择月" @change="month1Change" />
                        </el-col>
                        <el-col :span="6" class="input">
                          <el-input v-model="model.revenue1" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入" @change="revenue1Change">
                            <template slot="append">元</template>
                          </el-input>
                        </el-col>
                        <el-col :span="4">
                          <el-date-picker v-model="model.month2" value-format="yyyy-MM" type="month" placeholder="选择月" @change="month2Change" />
                        </el-col>
                        <el-col :span="6" class="input">
                          <el-input v-model="model.revenue2" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入" @change="revenue2Change">
                            <template slot="append">元</template>
                          </el-input>
                        </el-col>
                        <el-col :span="4">
                          <div class="flex">
                            <span>{{ model.monthOnMonthGrowth }}%</span>
                            <i v-if="model.monthOnMonthGrowth > 0" class="el-icon-top" />
                            <i v-else class="el-icon-bottom" />
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :xl="10" :lg="10" :md="12" :sm="24">
                  <el-form-item label="">
                    <div class="ServiceItemTable">
                      <el-row class="head" :gutter="10">
                        <el-col :span="9">今年累计</el-col>
                        <el-col :span="9">去年同期累计</el-col>
                        <el-col :span="6">同比增减</el-col>
                      </el-row>
                      <el-row class="body-row">
                        <el-col :span="9" class="input">
                          <el-input v-model="model.cumulativeThisYear" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入" @change="cumulativeThisYearChange">
                            <template slot="append">万元</template>
                          </el-input>
                        </el-col>
                        <el-col :span="9" class="input">
                          <el-input v-model="model.cumulativeLastYear" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入" @change="cumulativeLastYearChange">
                            <template slot="append">万元</template>
                          </el-input>
                        </el-col>
                        <el-col :span="6">
                          <div class="flex">
                            <span>{{ model.yearOnYearGrowth }}%</span>
                            <i v-if="model.yearOnYearGrowth > 0" class="el-icon-top" />
                            <i v-else class="el-icon-bottom" />
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </simpleInfoCard>
          <simpleInfoCard title="本年度盈利情况">
            <template slot="contents">
              <el-col :xl="8" :lg="8" :md="12" :sm="24">
                <el-form-item label="单月盈利:">
                  <el-input v-model="model.monthlyProfit" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="8" :lg="8" :md="12" :sm="24">
                <el-form-item label="年度累计盈利:">
                  <el-input v-model="model.cumulativeProfit" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                    <template slot="append">万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="8" :lg="8" :md="12" :sm="24">
                <el-form-item label="备注:">
                  <el-input v-model="model.remarks" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </template>
          </simpleInfoCard>
        </el-card>
      </div>
    </el-form>
    <el-card class="box-container-floor">
      <el-button @click="modelClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </el-card>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'
import simpleInfoCard from '@/components/xm/simpleInfoCard'
import selectOldFacility from '@/components/xm/selectOldFacility'
export default {
  components: {
    simpleInfoCard,
    selectOldFacility
  },
  data() {
    return {
      model: {},
      refName: 'ruleForm',
      updatePageState: '',
      disabledUpDoor: false,
      rules: {
        facNo: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        revenueYear: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      url: {
        update: '/company/report/saveAndEdit'
      }
    }
  },
  // 进入路由触发
  beforeRouteEnter: (to, from, next) => {
    to.meta.isShowBack = true
    to.meta.title = to.query.title
    next()
  },
  created() {
    // 更新页面状态标识缓存起来 add edit
    this.updatePageState = this.$route.query.updatePageState
    this.getDetails(this.$route.query.crNo)
  },
  mounted() {
  },
  methods: {
    cumulativeThisYearChange(r1) {
      const r2 = this.model.cumulativeLastYear
      if ((r1 > 0 || r1 === 0 || r1 === '0') && (r2 > 0 || r2 === 0 || r2 === '0')) {
        const amount1 = new this.Decimal(r1)
        const amount2 = new this.Decimal(r2)
        this.$set(this.model, 'yearOnYearGrowth', (amount2.minus(amount1)).dividedBy(amount1).times(100).toFixed(2))
      } else {
        this.$set(this.model, 'yearOnYearGrowth', '')
      }
    },
    cumulativeLastYearChange(r2) {
      const r1 = this.model.cumulativeThisYear
      if ((r1 > 0 || r1 === 0 || r1 === '0') && (r2 > 0 || r2 === 0 || r2 === '0')) {
        const amount1 = new this.Decimal(r1)
        const amount2 = new this.Decimal(r2)
        this.$set(this.model, 'yearOnYearGrowth', (amount2.minus(amount1)).dividedBy(amount1).times(100).toFixed(2))
      } else {
        this.$set(this.model, 'yearOnYearGrowth', '')
      }
    },
    month1Change(m1) {
      const m2 = this.model.month2
      if (m1 && m2) {
        const moment1 = this.$moment(m1, 'YYYY-MM')
        const moment2 = this.$moment(m2, 'YYYY-MM')
        if (moment1.isAfter(moment2)) {
          this.model.month1 = m2
        }
      }
    },
    revenue1Change(r1) {
      const r2 = this.model.revenue2
      if ((r1 > 0 || r1 === 0 || r1 === '0') && (r2 > 0 || r2 === 0 || r2 === '0')) {
        const amount1 = new this.Decimal(r1)
        const amount2 = new this.Decimal(r2)
        this.$set(this.model, 'monthOnMonthGrowth', (amount2.minus(amount1)).dividedBy(amount1).times(100).toFixed(2))
      } else {
        this.$set(this.model, 'monthOnMonthGrowth', '')
      }
    },
    month2Change(m2) {
      const m1 = this.model.month1
      if (m1 && m2) {
        const moment1 = this.$moment(m1, 'YYYY-MM')
        const moment2 = this.$moment(m2, 'YYYY-MM')
        if (moment1.isAfter(moment2)) {
          this.model.month2 = m1
        }
      }
    },
    revenue2Change(r2) {
      const r1 = this.model.revenue1
      if ((r1 > 0 || r1 === 0 || r1 === '0') && (r2 > 0 || r2 === 0 || r2 === '0')) {
        const amount1 = new this.Decimal(r1)
        const amount2 = new this.Decimal(r2)
        this.$set(this.model, 'monthOnMonthGrowth', (amount2.minus(amount1)).dividedBy(amount1).times(100).toFixed(2))
      } else {
        this.$set(this.model, 'monthOnMonthGrowth', '')
      }
    },
    // 获取详情
    getDetails(crNo) {
      this.$store.dispatch('app/setLoading', true)
      postAction(`/company/report/getByNo/${crNo}`, {}).then(res => {
        if (res.status === 0) {
          this.model = res.data
          this.model.revenueYear = String(res.data.revenueYear)
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // 提交
    submitForm() {
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          this.$store.dispatch('app/setLoading', true)
          postAction(this.url.update, this.model).then((res) => {
            if (res.status === 0) {
              this.modelClose()
              this.$message.success(res.message || '操作成功！')
              this.$emit('ok')
            } else {
              this.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    // 返回
    modelClose() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.forOldCompanyReport{
  display: inline-block;
  width: 100%;
  .el-col{
    padding: 0 40px;
    ::v-deep .el-date-editor{
      width: 100%;
    }
  }
  .box-f-card{
    margin-bottom: 80px;
    .box-card{
      margin-bottom: 16px;
      ::v-deep .el-form-item__label{
        line-height: 16px;
      }
    }
    .box-card:nth-last-child(2){
      border-bottom: none;
    }
  }
  .box-container-floor{
    position: fixed;
    bottom:0;
    left:0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 64px;
    margin-bottom: 0;
    padding-right: 16px;
    box-shadow: 0px -1px 16px 1px rgba(0,0,0,0.08);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    z-index: 900;
    border: none;
    ::v-deep .el-card__body{
      padding: 8px 0;
    }
  }
}
::v-deep .box-container{
  padding: 0 40px;
  .box-contents{
    padding: 10px 0 !important;
  }
  .el-col{
    padding: 0 40px 0 0;
  }
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
}
.ServiceItemTable{
  ::v-deep .el-input-group__append{
    padding: 0 10px !important;
  }
  .head{
    background-color: #f3f3f3;
    color: #666;
    border-top: 1px #d9d9d9 solid;
    border-bottom: 1px #d9d9d9 solid;
    .el-col{
      text-align: center;
    }
  }
  .body-row{
    padding: 5px 0;
    border-bottom: 1px solid #dcdfe6;
    .el-col{
      padding: 0 !important;
    }
    .input{
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input{
        text-align: right;
        width: 70%;
      }
    }
    .input-short{
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input{
        text-align: right;
        width: 80%;
      }
    }
    span{
      width: 60px;
    }
    .el-col{
      padding: 0;
      text-align: center;
    }
  }
}
.el-icon-top{
  margin-left: 6px;
  font-size: 20px;
  color: #7cde7c;
}
.el-icon-bottom{
  margin-left: 6px;
  font-size: 20px;
  color: #fa6261;
}
.flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

